<script setup lang="ts">
import  MyNavigate from "./components/MyNavigate.vue"
</script>
 
<template>
 <div id="page" style="background-color: blue;">
  <MyNavigate id="navigate"></MyNavigate>

  <div id="secondNavigate">
    <!-- <ul v-for="">
      <li>1</li>
      <li>2</li>
    </ul> -->
  </div>
  <div id="showPlace" >
    <RouterView></RouterView>
  </div>
 </div>


</template>

<style scoped>
#secondNavigate{
  width: 15%;
  height: 70%;
  background-color: bisque;
  margin-top: 10%;
  margin-left: 2%;
  display: inline-block;
}
#showPlace{
  width: 60%;
  height: 70%;
  display: inline-block;
  background-color: red;
  margin-left: 20%;
  margin-top: 18%;
}

#navigate {
  float: right;
  position: fixed;
  top: 5%;
  right: 5%;
  width: 80%;  /* 根据需要改变具体大小 */
  height: 100px; /* 根据需要改变具体大小 */
}
#page{
  height: 98%;
  width: 200%;
  background-color: blue;
}
</style>
<!-- <script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style> -->
